<template>
    <div style="width: 80%;margin-left:500px">
        <el-form ref="serviceOrder" :model="serviceOrder" label-width="100px">
            <el-form-item label="姓名">
                <!-- <el-input v-model="service.serviceName" style="width:300px">请输入服务名称</el-input> -->
                <el-input
                    placeholder="请输入内容"
                    v-model="serviceOrder.staff.staffName"
                    style="width:300px"
                    :disabled="true">
                </el-input>
            </el-form-item>
            <el-form-item label="电话">

                <el-input
                    placeholder="请输入内容"
                    v-model="serviceOrder.staff.staffTel"
                    style="width:300px"
                    :disabled="true">
                </el-input>
            </el-form-item>
            <el-form-item label="服务品类">

                <el-input
                    placeholder="请输入内容"
                    v-model="serviceOrder.service.serviceName"
                    style="width:300px"
                    :disabled="true">
                </el-input>
            </el-form-item>
            <el-form-item label="时间">

                <el-input
                    placeholder="请输入内容"
                    v-model="serviceOrder.serviceOrderDate"
                    style="width:300px"
                    :disabled="true">
                </el-input>
            </el-form-item>
            <el-form-item label="使用规格">

                <el-input
                    placeholder="请输入内容"
                    v-model="serviceOrder.service.serviceWeight"
                    style="width:300px"
                    :disabled="true">
                </el-input>
            </el-form-item>
            <el-form-item label="耗时">

                <el-input
                    placeholder="请输入内容"
                    v-model="serviceOrder.service.serviceUsetime"
                    style="width:300px"
                    :disabled="true">
                </el-input>
            </el-form-item>


            <el-form-item label="订单状态">
                <el-select v-model="value" clearable placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="价格">
                <el-input
                    placeholder="请输入内容"
                    v-model="serviceOrder.service.servicePrice"
                    style="width:300px"
                    :disabled="true">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item> 
        </el-form>
    </div>
  
</template>

<script>

import {updateServiceOrder} from '@/services/ServiceOrderService.js'

export default {
    data(){
        return{            
            value:'',
            options: [
                {
                value: '未完成',
                label: '未完成'
                }, 
                {
                value: '已完成',
                label: '已完成'
                },
            ],
            serviceOrder:{
                serviceOrderId:"",
                // serviceOrderDate:"",
                serviceOrderState:"",             
            },
        }
    },
    async created(){
      this.serviceOrder = this.$route.params;
    },
    methods:{
        async onSubmit(){
            console.log("----------------------")
            this.serviceOrderId = this.serviceOrderId
            // console.log(this.service.serviceId)
            // this.service.staffId = this.value
            this.serviceOrder.serviceOrderState = this.value
            var resp = await updateServiceOrder(this.serviceOrder);
            
            console.log(resp)
            if(resp.data){
                this.$router.push({name:"ServiceOrder"});
            }
            else{
                console.log("修改失败........");
            }
        },
        async cancel(){
            
            this.$router.push({name:"ServiceOrder"});
  
        }
    }
}
</script>

<style>

</style>